<div class="row row-no-gutters">
    <div class="col-xs-12 col-md-9">
        <div class="col-xs-6 col-md-3">
            <div class="bny-card">
                <div class="bny-card-header">
                    <span class="icon icon-bianji"></span>
                    今日注册
                </div>
                <div class="bny-card-body">
                    0
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-md-3">
            <div class="bny-card">
                <div class="bny-card-header">
                    <span class="icon icon-bianji_2"></span>
                    7日内注册
                </div>
                <div class="bny-card-body">
                    0
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-md-3">
            <div class="bny-card">
                <div class="bny-card-header">
                    <span class="icon icon-fuwu"></span>
                    30日内注册
                </div>
                <div class="bny-card-body">
                    0
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-md-3">
            <div class="bny-card">
                <div class="bny-card-header">
                    <span class="icon icon-dengpao"></span>
                    总注册
                </div>
                <div class="bny-card-body">
                    0
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-md-3">
        <div class="bny-card">
            <div class="bny-card-header">
                UI官网、框架、团队
            </div>
            <div class="bny-card-body">
                <div class="bny-breadcrumb" style="padding: 0;margin: 0;">
                    <div><a target="_blank" href="http://workbunny.github.io/bunny-ui/">Bunny-UI</a></div>
                    <div><a target="_blank" href="https://htmx.org/">HTMX</a></div>
                    <div><a target="_blank" href="https://github.com/workbunny">团队workbunny</a></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row row-no-gutters">
    <div class="col-xs-12 col-md-9">
        <div class="bny-card">
            <div class="bny-card-header">
                数据统计
            </div>
            <div class="bny-card-body">
                <div hx-ext="bny-echarts" hx-trigger="load"></div>
            </div>
        </div>

    </div>
    <div class="col-xs-12 col-md-3">
        <div class="bny-card">
            <div class="bny-card-header">
                主题信息
            </div>
            <div class="bny-card-body">
                <table>
                    <colgroup>
                        <col width="120">
                        <col>
                    </colgroup>
                    <tbody>
                        <tr>
                            <td>模板名称</td>
                            <td>Bunny-Admin</td>
                        </tr>
                        <tr>
                            <td>框架名称</td>
                            <td>Bunny-UI</td>
                        </tr>
                        <tr>
                            <td>Version</td>
                            <td>v1.0.1</td>
                        </tr>
                        <tr>
                            <td>HTMX</td>
                            <td>*</td>
                        </tr>
                        <tr>
                            <td>主要特色</td>
                            <td>易上手 / 响应式 / 清爽 / 极简</td>
                        </tr>
                        <tr>
                            <td>目标宗旨</td>
                            <td>打造更方便后端使用的前端框架</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-xs-12">
        <div class="bny-card">
            <div class="bny-card-header">
                表单统计
            </div>
            <div class="bny-card-body">
                <table>
                    <colgroup>
                        <col width="80">
                        <col width="150">
                        <col>
                    </colgroup>
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>需求人数</th>
                            <th>访问量</th>
                            <th>解决量</th>
                            <th>用户满意度</th>
                            <th>统计日期</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td lable="序号">1</td>
                            <td label="需求人数">14494</td>
                            <td label="访问量">13962</td>
                            <td label="解决量">14491</td>
                            <td label="用户满意度">96%</td>
                            <td label="统计日期">2025-03-14</td>
                            <td label="操作">
                                <a href="javascript:;">查看</a>
                            </td>
                        </tr>
                        <tr>
                            <td lable="序号">2</td>
                            <td label="需求人数">14494</td>
                            <td label="访问量">13962</td>
                            <td label="解决量">14491</td>
                            <td label="用户满意度">96%</td>
                            <td label="统计日期">2025-03-14</td>
                            <td label="操作">
                                <a href="javascript:;">查看</a>
                            </td>
                        </tr>
                        <tr>
                            <td lable="序号">3</td>
                            <td label="需求人数">14494</td>
                            <td label="访问量">13962</td>
                            <td label="解决量">14491</td>
                            <td label="用户满意度">96%</td>
                            <td label="统计日期">2025-03-14</td>
                            <td label="操作">
                                <a href="javascript:;">查看</a>
                            </td>
                        </tr>
                        <tr>
                            <td lable="序号">4</td>
                            <td label="需求人数">14494</td>
                            <td label="访问量">13962</td>
                            <td label="解决量">14491</td>
                            <td label="用户满意度">96%</td>
                            <td label="统计日期">2025-03-14</td>
                            <td label="操作">
                                <a href="javascript:;">查看</a>
                            </td>
                        </tr>
                        <tr>
                            <td lable="序号">5</td>
                            <td label="需求人数">14494</td>
                            <td label="访问量">13962</td>
                            <td label="解决量">14491</td>
                            <td label="用户满意度">96%</td>
                            <td label="统计日期">2025-03-14</td>
                            <td label="操作">
                                <a href="javascript:;">查看</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
    htmx.defineExtension("bny-echarts", {
        onEvent: function (name, evt) {
            if (name === "htmx:afterProcessNode") {
                evt.target.style.width = "100%";
                evt.target.style.height = "400px";
                const myChart = echarts.init(evt.target)
                // 指定图表的配置项和数据
                var option = {
                    tooltip: {},
                    legend: {
                        data: ['销量']
                    },
                    xAxis: {
                        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '销量',
                            type: 'bar',
                            data: [5, 20, 36, 10, 10, 20]
                        }
                    ]
                };
                window.addEventListener('resize', function () {
                    myChart.resize();
                });
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        }
    })
</script>